<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-06-21 16:23:39
 * @LastEditors: charles
 * @LastEditTime: 2021-06-22 22:32:03
-->
<template>

  <div style="margin:-.5em">
    <div ref="container_two">
       <el-button>默认按钮</el-button>


    </div>
    
  </div>
</template>
<script>
let THREE = require('three')
let OrbitControls  = require('three-OrbitControls')
let FBXLoader = require('three-fbxloader-offical')

export default {
  data(){
    return {

    }
  },
  mounted(){
    this.initChart();
  },
  
  methods:{
    
    
    initChart(){
      let container = this.$refs.container_two;
      let width = container.clientWidth;
      let height = 580;
      let k = width/height;
      let s = 150;

      // 1. 创建场景
      const scene = new THREE.Scene();

      // 2. 创建模型CircleGeometry(100,100,100);
      // 2.1 创建网格模型
     const geometry = new THREE.BoxGeometry(100,100,100);
     const material = new THREE.MeshBasicMaterial( { 
       color: 0x0000ff ,
        wireframe:true,
      } );
      
      let group=new THREE.Mesh(new THREE.PlaneBufferGeometry(30,30,100),new THREE.MeshStandardMaterial({color:0xeeeeee}));
      group.rotation.set(-Math.PI/2,0,0);
      group.position.set(0,0,0);
      group.receiveShadow=true;	//接收阴影
      group.castShadow=true;	//造成阴影
      // scene.add(group);

      var grid=new THREE.GridHelper(100,100);
      grid.position.set(0,0,0);
      scene.add(grid);
      var texLoader=new THREE.TextureLoader();

      
var a=1;
if(a==1)
     {var imagSrc1=[

        '/res/right.jpg',
        '/res/left.jpg',
        '/res/up.jpg',
        '/res/bottom.jpg',
        '/res/front.jpg',
        '/res/back.jpg'        
        ]
  
      var imgMat=[];
      for(var i=0;i<imagSrc1.length;i++){
        texLoader.setCrossOrigin(""); 
        var tex=texLoader.load(imagSrc1[i]);
        var mat=new THREE.MeshBasicMaterial({map:tex,side:THREE.DoubleSide});
        imgMat.push(mat);
      }
     }  
  
      var cube =new THREE.BoxGeometry(100,100,100);
      var cmesh=new THREE.Mesh(cube,imgMat);
      cmesh.geometry.scale(-1,1,1);
      scene.add(cmesh);
      // 加载模型
      // new FBXLoader().load('/res/obj/Alita.fbx', function (object3d) {
      //   scene.add(object3d);
      // });
      new FBXLoader().load('/res/obj/xiaoyuanmoxing.fbx',fbx=>{
        fbx.position.set(0,0,-3);
        fbx.scale.set(1,1,1);
        fbx.traverse(child=>{
          if(child.isMesh){
            child.castShadow=true;
            child.receiveShadow=true;
          }
        })
        scene.add(fbx);
      });
    
      // 2.2 点光源
      scene.add(new THREE.HemisphereLight(0xffeeb1,0x080808,1));
      var light=new THREE.SpotLight(0xffffff,1);
      light.position.set(0,50,0);
      light.castShadow=true;
      light.shadow.mapSize.width=1024*4;	//影子边缘清晰度
      light.shadow.mapSize.height=1024*4;
      scene.add(light);
 
      // 3. 创建摄像机
      // const camera = new THREE.OrthographicCamera(-s * k,s*k,s,-s,1,1000);
      // camera.position.set(200,300,200);
      // camera.lookAt(scene.position)
      const camera=new THREE.PerspectiveCamera(45,width/height,0.1,1000);
      camera.position.set(1,5,10);
      camera.lookAt(0,0,0);

      // 4. 创建渲染器
      const renderer = new THREE.WebGLRenderer({alpha:true,antialias:true});
      renderer.setSize( width, height );
      renderer.shadowMap.enabled=true;	//开启阴影渲染
      let renderColor=0xaaaaaa*Math.random(16);
      renderer.setClearColor(renderColor,1)
      container.appendChild( renderer.domElement );

      
      // 6. 添加控件
      let controls = new OrbitControls(camera,renderer.domElement);
      //限制相机滚轮缩放距离
      controls.minDistance=0;			
      controls.maxDistance=500;
      //限制相机角度
      controls.minPolarAngle=0;			
      // orbit.maxPolarAngle=Math.PI/2;
      //阻力 松开鼠标有滑动
      controls.enableDamp=true;	
      //自动旋转
      controls.autoRotate=false;

     
      
      // 动画
      var clock,mixer;
      clock=new THREE.Clock();
      mixer=null;
      var avatar;
      function Ani(){
        new THREE.FBXLoader().load('',fbx=>{
          fbx.position.set(0,0,-3);
          fbx.scale.set(0.1,0.1,0.1);
          fbx.traverse(child=>{
            if(child.isMesh){
              child.castShadow=true;
              child.receiveShadow=true;
            }
          })
          avatar=fbx;
          scene.add(fbx);
          mixer=new THREE.AnimationMixer(fbx);
          if(fbx.animations[0]){		//如果有动画
            var animationClip=mixer.clipAction(fbx.animations[0]);
            animationClip.play();
          }
        });
      }
      Ani();

       // 5. 执行渲染 
      const animate = function () {
	      renderer.render( scene, camera );
        requestAnimationFrame( animate );
        // group.rotateZ(0.01);
        controls.update();
        if(mixer!=null){
          mixer.update(clock.getDelta());
        }
	    };
	    animate();
    } 
  }
}
</script>